
// import TableList from "@components/templates/tablelist";
import imgUps from "@/image/logo_ups.svg"
import imgFedEx from "@/image/logo_fedex.svg"
import TableList from "@components/templates/customtablelist";
import comAdd from './add.vue'
import compUpdate from './update.vue';
import { HttpCarrierAccountList, HttpCarrierList, HttpDeleteCarrierAccount, HttpChangeCarrierAccountStatus, HttpGetSysAccountList} from '@/service/api/views'
import { mapState, mapGetters } from "vuex";
import mixins from '../mixin'
export default {
    mixins: [TableList,mixins],
    components: {
        comAdd,
        compUpdate
    },
    props: {
		selectedProduct: Object,
        productList: Object,
	},
    data () {
        return {
            // totals: 0,
            isMixin: true,
            Tools: { show: true },
            formData: {
                search: {
                }
            },
            Searchs: {
                show: true,
                labelWidth: 120,
            },
            Plugins: { show: true },
            carrierList:[],
            // carrierServiceList:[],
            carrierProductList: [],
            accountList: [],
            exportData:{},
            product: {},
        }
    },
    watch: {
        selectedProduct: {
            deep: true,
			immediate: true,
            handler(val, oldVal) {
                this.product = val;
                if(oldVal){
                    this.updateSearch();
                }
            },
        },
        productList: {
            deep: true,
			immediate: true,
            handler(val) {
                this.carrierProductList = val;
            },
        },
    },
    created(){
        HttpCarrierList().then(res=>{
            this.carrierList = res.data.map(item=>{
                return {
                    value:item.carrierCode,
                    label:item.carrierCode+' ('+item.carrierName+')',
                }
            })
        })
        // HttpCarrierServiceList().then(res=>{
        //     this.carrierServiceList = res.data.map(item=>{
        //         return {
        //             value:item.carrierServiceCode,
        //             label:item.carrierServiceCode+' ('+item.carrierServiceName+')',
        //         }
        //     })
        HttpGetSysAccountList({'search[EQ_active]': 1}).then(res=>{
            this.accountList = res.data.map(item=>{
                return {
                    value: item.id,
                    label: item.accountName,
                    attach: item
                }
            })
        })
    },
    methods: {
        ajaxRequest: HttpCarrierAccountList,
        interceptRequest (params) {
            params.search.EQ_carrierGroupId = this.product.id || '';
            if(params.search.IN_serviceType == 1){
                params.search.IN_serviceType = [1,2]
            }
            return params
        },
        handleOperates (params = "", type, batch) {
            if (batch === true) {
                params = (params || this.checkedData.join(',')) + '';
                if (!params.length) return this.$Message.warning('请选择至少一条数据');
            }
            switch (type) {
                case 'add':
                    this.operate = {
                        show:true,
                        title:'选择承运商',
                        width:'800px',
                        product: params.product,
                        component:'comAdd',
                        showFooter:false,
                        on:{
                            'on-success':()=>{
                                this.operate = {};
                            },
                        }
                    }
                    break;
                case 'query':
                    this.operate = {
                        title: '查看',
                        show: true,
                        width: 1200,
                        component: "compUpdate",
                        activeid: params,
                        querytype: 'query',
                        showFooter: false,
                    }
                    break;
                case 'queryBlank':
                    var url1 = this.$router.resolve({
                        name: 'tmsLogisticsProductsUpdate',
                        params: { type: 'query' },
                        query: { id: params},
                    });
                    window.open(url1.href, '_blank');
                    break;
                case 'edit':
                    var url2 = this.$router.resolve({
                        name: 'tmsLogisticsProductsUpdate',
                        params: { type },
                        query: { id: params },
                    });
                    window.open(url2.href, '_blank');
                    break;
                case 'changeStatus':
                    return new Promise((resolve) => {
                        this.operate = {
                            show: true,
                            alert: 'warning',
                            params: { id: params.id },
                            title: "修改状态",
                            ajaxRequest: HttpChangeCarrierAccountStatus,
                            callback:()=>{
                                this.$emit('on-update');
                                this.operate = {};
                            }
                        }
                    })
                case 'delete':
                    this.operate = {
                        show: true,
                        alert: 'warning',
                        params: { id: params },
                        title: this.$ct('global.common.delete', { defaultValue: '删除' }),
                        ajaxRequest: HttpDeleteCarrierAccount,
                        desc: this.$ct('fbb.localemanage.confirm_delete', { defaultValue: '删除后不可恢复，是否确认删除？' }),
                    }
                    break;
            }
        },
        getOperateNodeMap(row) {
            const { id } = row;
            return [
                {
                    label: "查看",
                    show: true,
                    params: id,
                    operate: "query"
                },
                {
                    label: "编辑",
                    show: true,
                    params: id,
                    operate: "edit"
                },
                {
                    label: "删除",
                    show: true,
                    params: id,
                    operate: "delete"
                },
            ];
        }
    },
    computed: {
        ...mapGetters('dictionary', ['getSysAllList']),
        ToolsData(){
            if(this.product.id && this.product.organizationId)
            return [
                {
                    name: "添加",
                    theme: 'primary',
                    operate: 'add',
                    params: {product: this.product}
                },
            ]
        },
        // 搜索下拉框展示内容
        SearchsData () {
            return [
                {
                    label: 'Carrier',
                    key: 'EQ_carrierCode',
                    tag: 'Select',
                    options:this.carrierList,
                    show:true,
                    props:{
                        filterable:true
                    }
                },
                {
                    label: 'ShipAccount',
                    key: 'EQ_accountId',
                    // tag: 'Input',
                    tag: 'Select',
                    options: this.accountList,
                    show:true,
                    props:{
                        filterable:true
                    }
                },
                {
                    label: 'BillAccount',
                    key: 'CN_thirdPartyAccount',
                    tag: 'Input',
                    show:true,
                },
                {
                    label: 'Ship Code/仓库Code',
                    key: 'CN_serviceRefCode',
                    tag: 'Input',
                },
                {
                    label: '物流产品',
                    key: 'EQ_carrierGroupCode',
                    tag: 'Input',
                },
                {
                    label: '服务类型',
                    key: 'IN_serviceType',
                    tag: 'Select',
                    options:[
                        { label: 'Label', value: 0},
                        { label: '仓配', value: 1},
                    ],
                },
            ]
        },
        // table的展示数据
        columns () {
            return [
                {
					title: "序号",
					type: 'index',
                    align: "center",
					width: 60
				},
                {
                    title: "操作",
                    width: 90,
                    render: this.getOperateNodes
                },
                {
					title: "Carrier Type",
                    key: "carrierType",
                    align: "center",
					width: 120,
                    render: (h, { row }) => {
                        return <div>{row.carrierType == 0 ? '快递' : '卡车'}</div>
                    }
				},
                {
					title: "Carrier",
                    key: "carrier",
                    align: "center",
					width: 120,
                    render: (h, { row }) => {
                        let carrier = this.carrierList.filter(item=>item.value == row.carrierCode)[0] || {value: 0, label: row.carrierCode};
                        return <div>
                            <span v-show={carrier.value == 'FedEx'|| carrier.label.toUpperCase() == 'FEDEX'} title="Fedex">
                                <Tooltip placement="top" content="Fedex">
                                    <img src={imgFedEx} style="vertical-align: bottom;width:48px" />
                                    {/* <span style="font-size: 40px;" class="iconfont icon-fedex"></span> */}
                                </Tooltip>
                            </span>
                            <span v-show={carrier.value == 'UPS'} title="UPS">
                                <Tooltip placement="top" content="UPS">
                                    <img src={imgUps} style="vertical-align: bottom;width:20px" />
                                    {/* <span style="font-size: 40px;" class="iconfont icon-ups"></span> */}
                                </Tooltip>
                            </span>
                            <span v-show={carrier.value !== 'UPS' && carrier.value !== 'FedEx' && carrier.label.toUpperCase() !== 'FEDEX'}>{carrier.label || '--'}</span>
                        </div>
                    }
				},
                // {
				// 	title: "Service",
                //     key: "Service",
                //     align: "center",
                //     render: (h, { row }) => {
                //         return <div>{row.Service || '--'}</div>
                //     },
				// 	minWidth: 120
				// },
                {
					title: "ShipAccount",
                    key: "accountNumber",
                    align: "center",
                    render: (h, { row }) => {
                        let accountName = this.accountList.filter(item=> item.value == row.accountId)
                        return <div>{accountName[0]? accountName[0].label : '--'}</div>
                    },
					width: 120
				},
                {
					title: "BillAccount",
                    key: "thirdPartyAccount",
                    align: "center",
                    render: (h, { row }) => {
                        return <div>{row.thirdPartyAccount || '--'}</div>
                    },
					minWidth: 120
				},
                {
					title: "物流产品",
                    key: "carrierGroupId",
                    align: "center",
					minWidth: 120,
                    render: (h, { row }) => {
                        if(!this.product.id){
                            const carrierGroup = this.carrierProductList.filter(item=>item.id == row.carrierGroupId)[0];
                            return <div>{carrierGroup.carrierGroupCode}</div>
                        }
                        else{
                            return <div>{this.product.carrierGroupCode}</div>
                        }
                    }
				},
                {
					title: "服务类型",
                    key: "serviceType",
                    align: "center",
					width: 80,
                    render: (h, { row }) => {
                        return <div>{row.serviceType == 0 ? 'Label' : '仓配'}</div>
                    }
				},
                {
					title: "Ship Code/仓库Code",
                    align: "center",
					minWidth: 120,
                    // render: (h, { row }) => {
                    //     return <div>
                    //         <div>{row.serviceRefCode || '--'}</div>
                    //         {/* <div>{row.warehouseCode || '--'}</div> */}
                    //     </div>
                    // },
                    render:(h,{row})=>{
                        return <div>
                            <a onClick={this.handleOperates.bind(this, row.id, 'query')}>{row.serviceRefCode || '--'}</a>
                            <a onClick={this.handleOperates.bind(this, row.id, 'queryBlank')}><Icon class="margin-left-10 font-14" type="ios-browsers-outline" /></a>
                        </div>
                    },
				},
                {
					title: "状态",
                    key: "active",
                    align: "center",
					width: 80,
                    render: (h, { row }) => {
                        let active = row.active == 1 ? true : false;
                        const carrierGroup = this.carrierProductList.filter(item=>item.id == row.carrierGroupId)[0];
                        if(carrierGroup.organizationId !==0)
                        return <Switch v-model={active} before-change={this.handleOperates.bind(this, { id:row.id }, 'changeStatus')}/>
                    }
				},
                {
                    title: "创建时间",
                    align: "center",
					width: 160,
                    render: (h, { row })=>{
                        return <div>{row.createdAt || '--'}</div>
                    }
                },
            ];
        },

    },

};
